<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>car</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
    <script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
</head>
<body>
<div id="app">
<template>
<div>
  <van-cell  class="title" title="我的车库" url="authentication.html"><van-icon slot="right-icon" name="plus" class="custom-icon" /></van-cell>
  <van-panel v-if="list.length > 0" :title="item.car_name" :desc="item.car_model">
      <img class="licon" slot="icon" :src="item.car_pic">
      <span v-if="item.status == '0'" class="cert certnever">审核中</span>
      <span v-if="item.status == '2'" class="cert certpass">未通过</span>
      <span v-if="item.status == '1'" class="cert">已通过</span>
  </van-panel>
  <van-panel class="divtip" v-else>
      <img :src="tipico" class="ximg">
      <p>暂无车辆，快去添加吧~</p>
  </van-panel>
  <van-panel class="mt10">
      <van-cell class="title" title="小工具"></van-cell>
      <van-row :gutter="16">
          <van-col class="mb20" span="6" v-for="(item, index) in items" :key="item.index">
              <a :href="item.link">
                  <img class="imgc" :src="item.ico" :alt="item.txt">
                  <h4 class="tac">{{item.txt}}</h4>
              </a>
          </van-col>
      </van-row>
  </van-panel>
</div>
</template>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            type: '1',
            tipico: 'http://download.bihuapp.com/icon/pic.png',
            list: [],
            token: 'b05a25ed8905cbf7425e691ab7ac32c2',
            items: [
                {
                i: 1,
                ico: './resource/img/wzcx.svg',
                txt: '违章查询',
                link: 'chosecar.html'
                },
                {
                i: 2,
                ico: './resource/img/wzdj.svg',
                txt: '违章代缴',
                link: 'fine.html'
                },
                {
                i: 3,
                ico: './resource/img/dsc.svg',
                txt: '代审车',
                link: 'trialcar'
                },
                {
                i: 4,
                ico: './resource/img/dhz.svg',
                txt: '代换照',
                link: 'change'
                },
                {
                i: 5,
                ico: './resource/img/cjpg.svg',
                txt: '车价评估',
                link: 'estimate'
                },
                {
                i: 6,
                ico: './resource/img/djbx.svg',
                txt: '代缴保险',
                link: 'secure'
                },
                {
                i: 7,
                ico: './resource/img/jzcf.svg',
                txt: '驾照查分',
                link: 'check.html'
                },
                {
                i: 8,
                ico: './resource/img/yjcx.svg',
                txt: '油价查询',
                link: 'price.html'
                },
                {
                i: 9,
                ico: './resource/img/jyz.svg',
                txt: '附近加油站',
                link: 'gasstation.html'
                },
                {
                i: 10,
                ico: './resource/img/fjwz.svg',
                txt: '附近违章',
                link: 'endorsement.html'
                },
                {
                i: 11,
                ico: './resource/img/jzyy.svg',
                txt: '兼职运营',
                link: 'operate.html'
                }
            ]
        },
        created () {            
            mag.toLogin(function(rs) {
                this.token = rs.token
                localStorage.setItem('token', rs.token)
                this.getCar
            })
        },
        methods: {
            getCar: function() {
                let that = this
                let postparams = {
                    token: localStorage.getItem('token')
                }
                axios.post('/CarInfo/getUserCarInfoList', postparams).then(({data}) => {
                    if (data.code === 200) {
                        that.list = data.data
                    } else {
                        that.list = ''
                    }
                })
            }
        }
    })
  </script>
<style scoped>
html,body{
    width: 100%;
    height: 100%;
    background: #f8f8f8;
}
.title{
  font-size: 16px;
  border-left: solid #FFBB4C 2px;
  padding-left: 10px;
  color: #808080;
  line-height: 1em; 
}
.divtip{
    text-align: center;
}
.ximg{
    max-width: 40%;
    display: block;
    margin: 10px auto;
}
.tac{
    color: #353535;
    text-align: center;
    margin-top: 5px;
}
.imgc{
    max-width: 50%;
    margin: 0 auto;
    display: block;
}
.mb20{
    margin-bottom: 20px;
}
.mt10{
    margin-top: 10px;
}
</style>
</body>
</html>